<template>
    <div>
        <v-toolbar fixed flat extended extension-height=24 style="z-index:999">
            <v-btn @click="goBack" icon>
                <v-icon>arrow_back</v-icon>
            </v-btn>
            <v-select hide-details v-model="searchType" :items="searchTypes" item-text="name" item-value="value" default="" label="" class="search" style="width:100px;"></v-select>
            <v-text-field hide-details placeholder="搜索" v-model="searchText" :append-icon="'search'" label="Search" single-line @click:append="toggleSearch" class="search"></v-text-field>
            <v-layout row slot="extension" class="btnToggle">
                <v-flex xs4 class='controlBarBtn' :class="(deviceType&&deviceType.value)?'selected':''" @click="targetSelect('deviceType')">
                    <p>{{(deviceType&&deviceType.value)?deviceType.label:'仪器类别'}}</p>
                </v-flex>
                <v-flex xs4 class='controlBarBtn' :class="(deviceStatus&&deviceStatus.value)?'selected':''" @click="targetSelect('deviceStatus')">
                    <p>{{(deviceStatus&&deviceStatus.value)?deviceStatus.label:'仪器状态'}}</p>
                </v-flex>
                <v-flex xs4 class='controlBarBtn' :class="(office&&office.id)?'selected':''" @click="targetSelect('office')">
                    <p>{{(office&&office.id)?office.name:'所属部门'}}</p>
                </v-flex>
                <div class="hiddenSelects">
                    <v-layout row>
                        <v-flex xs4>
                            <v-select class="deviceType" v-model="deviceType" :items="deviceTypes" item-text="label" item-value="value" label="" return-object no-data-text="数据加载中"></v-select>
                        </v-flex>
                        <v-flex xs4>
                            <v-select class="deviceStatus" v-model="deviceStatus" :items="deviceStatuses" item-text="label" item-value="value" label="" return-object no-data-text="数据加载中"></v-select>
                        </v-flex>
                        <v-flex xs4>
                            <v-select class="office" v-model="office" :items="offices" item-text="name" item-value="id" label="" return-object no-data-text="数据加载中"></v-select>
                        </v-flex>
                    </v-layout>
                </div>
            </v-layout>
        </v-toolbar>
        <v-content class="pullToContent">
            <pull-to :top-load-method="refreshList" :bottom-load-method="loadList">
                <ul class="deviceList">
                    <li v-for="(device, index) in lists" @click="toDetail(device.id)" :key="device.id">
                        <v-divider v-if="index!=0" :key="index"></v-divider>
                        <v-layout class="liContent" row align-center>
                            <v-flex xs4 class="imgAvatar">
                                <img :src="getFTPimgAddr(device.imagePath)">
                            </v-flex>
                            <v-flex xs8>
                                <v-layout column>
                                    <v-flex class="liTitle" v-html="device.apparatusName"></v-flex>
                                    <v-flex class="liDetail">仪器型号：{{device.apparatusModel}}</v-flex>
                                    <v-flex class="liDetail">当前状态：{{getDictName('apparatus_status',device.apparatusStatus)}}</v-flex>
                                    <v-flex class="liDetail">放置地点：{{device.location}}</v-flex>
                                    <v-flex class="liDetail">所属部门：{{device.office}}</v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </li>
                    <li v-if="isLoading" class="loadingRing">
                        <v-layout row align-center justify-center>
                            <v-progress-circular :size="70" :width="7" color="primary" indeterminate></v-progress-circular>
                        </v-layout>
                    </li>
                    <li v-if="!isLoading&&lists.length<1" class="blankAlert">
                        <v-layout row align-center justify-center>
                            <v-icon x-large color="#AAA">block</v-icon><span> 没有找到任何数据</span>
                        </v-layout>
                    </li>
                </ul>
                <template v-if="noMore" scope slot="bottom-block">
                    <v-layout row align-center justify-center>
                        <v-icon>warning</v-icon><span> 没有更多了</span>
                    </v-layout>
                </template>
            </pull-to>
        </v-content>
    </div>
</template>
<script>
import PullTo from 'vue-pull-to';
import httpUtils from '../utils/httpUtils';
import { commonInfo } from '../utils/commonUtils';
export default {
    name: 'DeviceList',
    components: {
        PullTo
    },
    data: function () {
        return {
            searchType: 'apparatusName',
            searchTypes: [
                { name: '设备名称', value: 'apparatusName' },
                { name: '负责人', value: 'personCharge' }
            ],
            searchText: '',
            deviceType: { label: '', value: '' },
            deviceTypes: [{ label: '', value: '' }],
            deviceStatus: { label: '', value: '' },
            deviceStatuses: [{ label: '', value: '' }],
            office: { name: '', id: '' },
            offices: [{ name: '', id: '' }],
            conditions: {
                apparatusName: '',
                apparatusStatus: '',
                apparatusClass: '',
                office: '',
                personCharge: '',
                location: '',
                pageNo: 1
            },
            lists: [],
            isLoading: true,
            noMore: false
        }
    },
    beforeMount() {
        this.initSelects();
        this.clearnListAndGetNew();
    },
    methods: {
        toggleSearch() {
            this.conditions.apparatusName = '';
            this.conditions.personCharge = '';
            this.conditions.location = ''
            this.conditions[this.searchType] = this.searchText;
            this.clearnListAndGetNew();
        },
        initSelects() {
            //获取设备类型
            httpUtils.getJSONWithToken('c001.s002.m002', {
                type: 'apparatus_class'
            }).then(data => {
                this.deviceTypes = this.deviceTypes.concat(data);
            }).catch(err => {
                this.$store.dispatch('valert/showAlert', { text: '错误：' + err });
            });
            //获取设备状态
            httpUtils.getJSONWithToken('c001.s002.m002', {
                type: 'apparatus_status'
            }).then(data => {
                this.deviceStatuses = this.deviceStatuses.concat(data);
            }).catch(err => {
                this.$store.dispatch('valert/showAlert', { text: '错误：' + err });
            });
            //获取部门列表
            httpUtils.getJSONWithToken('c001.s004.m003').then(data => {
                this.offices = this.offices.concat(data);
            }).catch(err => {
                this.$store.dispatch('valert/showAlert', { text: '错误：' + err });
            });
        },
        targetSelect(classNmae) {
            let elm = document.getElementsByClassName(classNmae)[0].children[0].children[0];
            elm.click();
        },
        refreshList(loaded) {
            this.clearnListAndGetNew(loaded('done'));
        },
        loadList(loaded) {
            if (!this.noMore) {
                this.conditions.pageNo++;
                this.getDeviceList(loaded('done'));
            } else {
                loaded('done')
            }
        },
        toDetail(id) {
            this.$router.push({ path: '/device/' + id + '/' });
        },
        getDeviceList(callback) {
            httpUtils.getJSONWithToken('c001.s004.m001', this.conditions).then(data => {
                this.lists = this.lists.concat(data);
                if (callback && typeof callback === 'function') {
                    callback();
                }
                if (data.length < 10) {
                    this.noMore = true;
                } else {
                    this.noMore = false;
                }
                this.isLoading = false;
            }).catch(err => {
                this.$store.dispatch('valert/showAlert', { text: '错误：' + err });
            });
        },
        clearnListAndGetNew(callback) {
            this.isLoading = true;
            this.conditions.pageNo = 1;
            this.lists = [];
            this.getDeviceList(callback);
        },
        goBack() {
            this.$router.go(-1);
        },
        getDictName(type, key) {
            if (type === "apparatus_class") {
                for (let i of this.deviceTypes) {
                    if (i.value === key) {
                        return i.label;
                    }
                }
            } else if (type === "apparatus_status") {
                for (let i of this.deviceStatuses) {
                    if (i.value === key) {
                        return i.label;
                    }
                }
            }
        },
        getFTPimgAddr(addr) {
            if (addr && typeof addr === 'string') {
                let url = addr.split('|')[1];
                return commonInfo.ftpServer + url;
            } else {
                return commonInfo.ftpServer + '/images/noimage.jpg';
            }
        }
    },
    watch: {
        deviceType: function () {
            this.conditions.apparatusClass = this.deviceType.value;
            this.clearnListAndGetNew();
        },
        deviceStatus: function () {
            this.conditions.apparatusStatus = this.deviceStatus.value;
            this.clearnListAndGetNew();
        },
        office: function () {
            this.conditions.office = this.office.id;
            this.clearnListAndGetNew();
        }
    }
}
</script>
<style lang="less" scoped>
.search {
    padding-top: 0px;
    font-size: 14px;
}
.searchBar {
    padding-left: 2px;
}
.selected {
    color: #1976d2;
}
.btnToggle {
    background-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    .controlBarBtn {
        height: 20px;
        border-left: solid 1px #eee;
        border-right: solid 1px #eee;
        p {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: 20px;
            vertical-align: middle;
            text-align: center;
            margin: 0;
            i {
                font-size: 17px;
            }
        }
    }
}
.hiddenSelects {
    display: block;
    position: fixed;
    top: 70px;
    visibility: hidden;
}
.deviceList {
    list-style-type: none;
    padding: 0px 5px;
    background-color: #f5f5f5;
    .loadingRing {
        background-color: rgba(0, 0, 0, 0);
        padding-top: 50px;
    }
    .blankAlert {
        padding-top: 50px;
        background-color: rgba(0, 0, 0, 0);
        span {
            font-size: 20px;
            color: #aaa;
        }
    }
    li {
        background-color: #fff;
        hr {
            border-color: rgba(0, 0, 0, 0);
            margin-top: 3px;
        }
        .liContent {
            padding: 5px;
        }
    }
}
.imgAvatar {
    padding: 10px;
    img {
        width: 100%;
    }
}
.liTitle {
    font-size: 16px;
    font-weight: bold;
}
.liDetail {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.pullToContent {
    z-index: 1;
    position: fixed;
    width: 100%;
    top: 80px;
    height: e("calc(100vh - 80px)");
    background-color: #f5f5f5;
}
</style>
